<%--
  Created by IntelliJ IDEA.
  User: 86132
  Date: 2022/11/2
  Time: 20:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%= basePath%>">
    <script src="js/jquery-3.6.0.min.js"></script>
    <title>myTalk</title>
</head>
<script type="text/javascript">
    $(function (){
        //记载所有我的说说
        $.ajax({
            url : "workbench/main/queryMyTalk.do",
            dataType : "json",
            type : "GET",
            success : function (talkList){
                let divText=""
                $.each(talkList,function (i,talk){
                    let divRemark=""
                    divText+="<div class='totalDiv'><div class='talkMainDiv'> <div class='talkNameClass'>"+talk.user.userName+"</div><input type='checkbox' class='deleteTalkClass' value='"+talk.talkId+"'></input> <div class='timeCreateClass'>"+talk.timeCreate+"</div><div class='talkContentClass'>"+talk.talkContent+"</div> <div class='talkRemarkClass' contenteditable='true'></div> <button class='submitTalkRemarkBtn' value='"+talk.talkId+"' onclick='javascript:submitTalkRemark(this)'>评论</button> </div>"
                    $.each(talk.talkRemarkList,function (i,talkRemark){
                        divRemark+="<div class='talkRemark'><div class='remarkUserName'>"+talkRemark.user.userName+"</div><div class='timeRemark'>"+talkRemark.timeRemark+"</div> <div class='remarkContent'>"+talkRemark.remarkContent+"</div></div>"
                    })
                    divText+=divRemark
                    divText+="</div>"
                })
                $("#mainDiv").append(divText)
            }
        })
        //给删除添加点击事件
        $("#deleteTalkDiv").click(function (){
            if ($("#mainDiv input[type='checkbox']:checked").length == 0){
                alert("请至少选择一条说说删除...")
                return
            }
            var checkedIds=$("#mainDiv input[type='checkbox']:checked")
            var talkIds=""
            $.each(checkedIds,function (){
                talkIds+="talkId="+this.value+"&"
            })
            talkIds=talkIds.substr(0,talkIds.length-1)
            $.ajax({
                url : "workbench/main/deleteTalk.do",
                dataType: "json",
                type: "post",
                data : talkIds,
                success : function (resp){
                    if (resp.code == 1){
                        window.location.href="workbench/main/myTalk.do"
                    }else {
                        alert(resp.message)
                    }
                }
            })
        })

    })

    //    给发表评论按钮添加单机事件的函数,发送ajax请求,添加评论
    function submitTalkRemark(obj){
        var talkId=obj.value
        var remarkContent=$(obj).parent().find(".talkRemarkClass").html()
        if (remarkContent == ""){
            return
        }
        $.ajax({
            url : "workbench/main/addTalkRemark.do",
            type : "POST",
            dataType : "json",
            data: {
                talkId : talkId,
                remarkContent : remarkContent
            },
            success : function (resp){
                if (resp.code == 1){
                    window.location.href="workbench/main/myTalk.do"
                }else {
                    alert(resp.message)
                }
            }
        })
    }
</script>

<style>
    body{
        margin: 0;
        padding: 0;
        border: 0;
    }
    #mainDiv{
        height: 90%;
        overflow-y: scroll;
    }
    #mainDiv::-webkit-scrollbar{
        display: none;
    }
    #bottomDiv {
        width: 100%;
        top: 0;
        height: 10%;
        background: #e3fff5;
    }
    #deleteTalkDiv{
        top: 30%;
        position: relative;
        margin-left: 85%;
        height: 30px;
        width: 50px;
        text-align: center;
        line-height: 30px;
        border-style: solid;
        border-width: 0.75px;
        font-size: 5px;
        cursor: pointer;
    }
    .talkMainDiv{
        margin-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        word-break: break-word;
        overflow-y: scroll;
        height: 195px;
    }
    .talkMainDiv::-webkit-scrollbar{
        display: none;
    }
    .talkNameClass{
        width: fit-content;
        display: inline-block;
        height: 25px;
    }
    .timeCreateClass{
        width: fit-content;
        color: grey;
        font-size: 5px;
        display: inline-block;
    }
    .talkContentClass{
        margin-top: 5px;
        height: 100px;
        overflow-y: scroll;
    }
    .talkContentClass::-webkit-scrollbar{
        display: none;
    }
    .deleteTalkClass{
        display: inline-block;
        height: 16px;
        width: 16px;
        cursor: pointer;
        top: 8px;
        left: 90%;
        position: relative;
    }
    .talkRemarkClass{
        position: relative;
        border-style: solid;
        border-width: 1px;
        height: 30px;
        overflow-y: scroll;
    }
    .talkRemarkClass::-webkit-scrollbar{
        display: none;
    }
    .submitTalkRemarkBtn{
        width: fit-content;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 10px;
        cursor: pointer;
        margin-left: 526px;
        /*margin-left: 130px;*/
        position: relative;
        background: none;
        border-width: 1px;
    }
    .talkRemark{
        background: gainsboro;
        position: relative;
        bottom: 1px;
        height: fit-content;
        padding-left: 10px;
    }
    .totalDiv{
        margin-left: 20%;
        margin-right: 20%;
        margin-bottom: 15px;
        padding-left: 10px;
        padding-right: 10px;
        background: peachpuff;
    }
    .remarkUserName{
        width: fit-content;
        display: inline-block;
        height: 25px;
    }
    .timeRemark{
        width: fit-content;
        color: grey;
        font-size: 5px;
        display: inline-block;
        margin-left: 10px;
    }
    .remarkContent{
        width: 100%;
        word-wrap: break-word;
        margin-bottom: 10px;
    }
</style>

<body>
<div id="mainDiv">
    <%--
        <div class='totalDiv'>
            <div class='talkMainDiv'>
                <div class='talkNameClass'>'+talk.user.userName+'</div><input type='checkbox' class='deleteTalkClass'>"+talk.talkId+"</input>

                <div class='timeCreateClass'>"+talk.timeCreate+"</div>
                <div class='talkContentClass'>"+talk.talkContent+"</div>
                <div class='talkRemarkClass' contenteditable='true'></div>
                <button class='submitTalkRemarkBtn'>评论</button>
            </div>
            <div class='talkRemark'>
                <div class='remarkUserName'>"+talkRemark.user.userName+"</div><div class='timeRemark'>"+talkRemark.timeRemark+"</div>
                <div class='remarkContent'>"+talkRemark.remarkContent+"</div>
            </div>
        </div>
    --%>
</div>
<div id="bottomDiv">
    <div id="deleteTalkDiv">删除说说</div>
</div>
</body>
</html>
